<template>
  <div>

    <div>
      学生列表
    </div>
    <el-table
        :data="tableDataTest">
      <el-row>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="medium"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-popconfirm
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                size="mini"
                title="确定删除该学生？"
                @confirm="handleDelete(scope.$index,scope.row)"
            >
              <el-button slot="reference" size="medium">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

        <el-table-column
            label="姓名"
            width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="地址">
          <template slot-scope="scope">
            <p>{{ scope.row.address }}</p>
          </template>
        </el-table-column>

        <el-table-column
            label="注册日期"
            width="180" >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
      </el-row>

    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin: 0 0 0 50px "
          :total=tableDataTest.length>
      </el-pagination>
    </div>


  </div>
</template>

<script>
import axios from "axios"

export default {
  name: "StudentList",

  data() {
    return {
      tableDataTest: [],
      currentPage1: 2
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getData() {
      axios.get('http://127.0.0.1/user').then(res => {
        this.tableDataTest = res.data
      }).catch(err => {
        console.log("获取数据失败" + err);
      })
    }
  },
  components: {}
}
</script>

<style scoped>
::v-deep .cell {
  text-align: center;
}

.block {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>